<template>
  <div>
    <nav-bar title="搜索结果" />
    <main>
      <!-- 文章列表 -->
      <van-loading
        v-if="loading"
        size="24px"
        class="loading"
      >
        加载中...
      </van-loading>
      <van-empty
        v-else-if="!searchList"
        image="error"
        description="请求错误"
      />
      <van-empty
        v-else-if="!searchList.length"
        description="暂无数据"
      />
      <article-list
        v-else
        :data="searchList"
      />
    </main>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'SearchResult',
  data() {
    return {
      loading: true,
    };
  },
  computed: {
    ...mapState('search', [
      'searchList'
    ])
  },
  methods: {
    ...mapActions('search', [
      'updateSearchList',
    ]),
    ...mapMutations('search', [
      'SET_SEARCH_LIST'
    ])
  },
  async created() {
    this.loading = true
    // 路由实例
    await this.updateSearchList(this.$route.query.q);
    this.loading = false
  },
  beforeDestroy() {
    this.SET_SEARCH_LIST([]);
  },
}
</script>

<style lang="less" scoped>
  main {
    padding: 0 8px;
  }
  .loading {
    display: inline-block;
    text-align: center;
    line-height: 100px;
  }
</style>
